<template>
	<view class="container">
		<NavBar>
			<view class="searchInput">
				<u-search 
					placeholder="请输入您要搜索的内容" 
					v-model="searchVal"
					height="60"
					clearabled
					<!-- #ifdef MP-WEIXIN -->
					:showAction="false"
					<!-- #endif -->
					:actionStyle="{color:'#fff'}"
					@search="search"
					@custom="search"
					>
				</u-search>
			</view>
		</NavBar>
		<view class="search" v-if="!searchStatus">
			<view class="search_title">
				<text class="font">搜索历史</text>
				<text class="iconfont icon-shanchu" @click="delBothTag"></text>
			</view>
			<view class="search_history">
				<u-tag 
					v-for="(item,index) in labelList"
					:key="index"
					@click="clickTag(item)" 
					@close="deleteTag(item)" 
					:text="item" 
					plain 
					size="mini" 
					type="success"  
					closable>
				</u-tag>
			</view>
		</view>
		<view class="content" v-else>
			<template v-if="!isEmpty">
				<PostItem v-for="item in postList" :key="item._id" :item="item"></PostItem>
			</template>
			<template v-if="!isEmpty">
				<ProList :dataList = "proList"></ProList>
			</template>
			<view class="empty" v-else="isEmpty">
				<u--image width="200rpx"
				    height="300rpx" 
				    src="/static/images/empty.png"
				    shape="square">
				</u--image>
				<text>未搜索到该内容</text>
			</view>
		</view>
	</view>
</template>


<script>
	import PostItem from '@/pages/Home/components/PostItem.vue'
	import ProList from '@/pages/Shop/components/ProList'
	import {mapState,mapMutations} from 'vuex'
	export default {
		components:{
			PostItem,
			ProList
		},
		data() {
			return {
				isEmpty:false,
				searchVal:'',
				comeFrom:'post',
				dataList:[],
				proList:[],
				searchStatus:false
			}
		},
		computed:{
			...mapState({
				postLabel:state=>state.search.postLabel,
				goodsLabel:state=>state.search.goodsLabel
			}),
			labelList () {
			  if (this.comeFrom === 'post') {
			    return this.postLabel
			  } else {
			    return this.goodsLabel
			  }
			},
			postList () {
				const postList = this.dataList.map(item => {
				  switch (item.catalog) {
					case 'share':
					  item.catalog = '分享'
					  break
					case 'ask':
					  item.catalog = '提问'
					  break
					case 'notice':
					  item.catalog = '公告'
					  break
				  }
				  return item
				})
				return postList
			}	
		},
		onLoad(data){
			this.comeFrom = data.comeFrom
		},
		methods: {
			...mapMutations([
				'givePostLabel',
				'giveGoodsLabel',
				'delPostLabel',
				'delGoodsLabel',
				'delBothPostLabel',
				'delBothGoodsLabel'
			]),
			async search(value){
				this.searchVal = ''
				this.searchStatus = true
				if(this.comeFrom === 'post'){
					this.givePostLabel(value)
					const {code,data}= await this.$axios.api.searchList({title:value})
					if(code === 200){
						this.dataList = data
						this.dataList.length>0?this.isEmpty = false:this.isEmpty = true
					}
				}else if(this.comeFrom === 'goods'){
					this.giveGoodsLabel(value)
					const {code,data} = await this.$axios.api.searchProList({title:value})
					if(code === 200){
						this.proList = data
						this.proList.length>0?this.isEmpty = false:this.isEmpty = true
					}
				}
			},
			clickTag(val){
				this.searchVal = val
			},
			deleteTag(val){
				const this_ = this
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该记录吗？',
				    success: function (res) {
				        if (res.confirm) {
				            if(this_.comeFrom === 'post'){
								this_.delPostLabel(val)
							}else if(this_.comeFrom === 'goods'){
								this_.delGoodsLabel(val)
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				})
			},
			delBothTag(){
				const this_ = this
				uni.showModal({
					title:'提示',
					content:'确定要清空历史记录吗？',
					success:function(res){
						if(res.confirm){
							if(this_.comeFrom === 'post'){
								this_.delBothPostLabel()
							}else if(this_.comeFrom === 'goods'){
								this_.delBothGoodsLabel()
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: rgba(31, 182, 131, 0.1);
	.searchInput {
		/* #ifdef MP-WEIXIN */
		width: 460rpx;
		margin-left: -140rpx;
		/* #endif */
		
		/* #ifdef H5||APP-VUE */
		width: 670rpx;
		margin-left: 80rpx;
		/* #endif */
	}
	.search{
		flex: 1;
		display: flex;
		flex-direction: column;
		&_title{
			width: 100%;
			height: 80rpx;
			padding:0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #bbb;
			.font{
				font-size: 30rpx;
				color: $u-success;
				font-weight: bold;
			}
		}
		&_history{
			width: 100%;
			min-height: 100rpx;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
		}
	} 
	.content{
		flex: 1;
		display: flex;
		flex-direction: column;
		.empty{
			width: 100%;
			min-height: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text{
				color: $u-success;
			}
		}
	}
}
</style>